<template>
  <div class="weapons">
    <div class="weapons-header">
      <div class="weapon-types">
        <button 
          v-for="type in weaponTypes" 
          :key="type"
          :class="{ active: currentType === type }"
          @click="setCurrentType(type)"
        >
          {{ type }}
        </button>
      </div>
      <div class="owned-toggle">
        <label>
          <input type="checkbox" v-model="showOnlyOwned">
          仅显示已拥有
        </label>
      </div>
    </div>

    <div class="weapons-grid">
      <div v-for="weapon in filteredWeapons" :key="weapon.id" class="weapon-card">
        <div class="weapon-image">
          <img :src="weapon.image" :alt="weapon.name">
          <div class="weapon-owned" v-if="weapon.owned">已拥有</div>
          <button 
            class="star-button" 
            :class="{ 'starred': isRecommended(weapon.id) }"
            @click="toggleRecommended(weapon.id)"
            :disabled="!weapon.owned"
            :title="weapon.owned ? '推荐到首页' : '需要先拥有装备'"
          >
            <svg viewBox="0 0 24 24" class="star-icon">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
          </button>
          <button 
            v-if="!weapon.owned"
            class="wishlist-btn"
            :class="{ 'active': isInWishlist(weapon.id) }"
            @click="toggleWishlist(weapon.id)"
            :title="isInWishlist(weapon.id) ? '从愿望清单移除' : '添加到愿望清单'"
          >
            <svg viewBox="0 0 24 24" class="heart-icon">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="weapon-info">
          <h3>{{ weapon.name }}</h3>
          <p>{{ weapon.type }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'Weapons',
  setup() {
    const store = useStore()
    const currentType = ref('全部')
    
    const weaponTypes = ['全部', '狂徒', '幻影']
    
    const showOnlyOwned = computed({
      get: () => store.state.showOnlyOwned,
      set: (value) => store.commit('toggleShowOnlyOwned')
    })

    const filteredWeapons = computed(() => {
      return store.getters.filteredWeapons(currentType.value)
    })

    const setCurrentType = (type) => {
      currentType.value = type
    }

    const isRecommended = (weaponId) => {
      return store.state.recommendedWeapons.includes(weaponId)
    }

    const toggleRecommended = (weaponId) => {
      store.dispatch('toggleRecommendedWeapon', weaponId)
    }

    const isInWishlist = (weaponId) => {
      return store.getters.isInWishlist(weaponId)
    }

    const toggleWishlist = (weaponId) => {
      store.dispatch('toggleWishlistItem', weaponId)
    }

    return {
      currentType,
      weaponTypes,
      showOnlyOwned,
      filteredWeapons,
      setCurrentType,
      isRecommended,
      toggleRecommended,
      isInWishlist,
      toggleWishlist
    }
  }
}
</script>

<style scoped>
.weapons {
  padding: 80px 2rem 2rem;
  max-width: 1400px;  /* 限制最大宽度 */
  margin: 0 auto;
}

.weapons-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.weapon-types {
  display: flex;
  gap: 1rem;
}

.weapon-types button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #1f1f1f;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.weapon-types button.active {
  background-color: #ff4655;
}

.owned-toggle {
  color: white;
}

.owned-toggle label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.weapons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

.weapon-card {
  background-color: #1f1f1f;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}

.weapon-card:hover {
  transform: translateY(-5px);
}

.weapon-image {
  position: relative;
  height: 200px;  /* 固定图片高度 */
}

.weapon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weapon-owned {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #4CAF50;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.star-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s;
  z-index: 2;
}

.star-button:hover {
  transform: scale(1.1);
}

.star-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.star-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #FFD700;
  stroke-width: 2;
  transition: fill 0.3s;
}

.star-button.starred .star-icon {
  fill: #FFD700;
}

.weapon-info {
  padding: 1rem;
}

.weapon-info h3 {
  color: white;
  margin: 0 0 0.5rem;
}

.weapon-info p {
  color: #ff4655;
  margin: 0;
}

.wishlist-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s;
  z-index: 2;
}

.wishlist-btn:hover {
  transform: scale(1.1);
}

.heart-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #ff4655;
  stroke-width: 2;
  transition: fill 0.3s;
}

.wishlist-btn.active .heart-icon {
  fill: #ff4655;
}

.ownership-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #ff4655;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.ownership-btn.owned {
  background-color: #4CAF50;
}

.ownership-btn.not-owned {
  background-color: #ff4655;
}
</style> 